import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Myself from './my/Myself.js';
import Setting from './my/Setting.js';
import MyInfomation from './my/MyInfomation.js';
import Myxiaoyq from './my/Myxyq.js';
import ChangeMyselfScreen from './my/updateMyself.js';
import Schoolindex from './index/index.js';
import MessageScreen from './message/message.js';
import PostScreenindex from './post/index.js';
import Activity from './activity/index.js';
import Mycollect from './my/MyCollect.js';
import MyPost from './my/MyPost.js';
import Mycommit from './my/MyCommit.js';
// import CharacterWheel from './my/CharacterWheel.js';
import Test from './test.js';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); // 创建一个新的 Stack Navigator
function TheMy() {
  return (
    <Stack.Navigator initialRouteName="MySelf">
      <Stack.Screen name="我的页面" component={Myself} />
      <Stack.Screen name="主页" component={Myxiaoyq} />
      <Stack.Screen
        name="系统设置"
        component={Setting}
        options={{
          headerTitle: '系统设置',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
      <Stack.Screen
        name="个人信息"
        component={MyInfomation}
        options={{
          headerTitle: '个人信息',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
      <Stack.Screen
        name="修改昵称"
        component={ChangeMyselfScreen}
        options={{
          headerTitle: '修改昵称',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
      <Stack.Screen
        name="我的收藏"
        component={Mycollect}
        options={{
          headerTitle: '我的收藏',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
      <Stack.Screen
        name="我的帖子"
        component={MyPost}
        options={{
          headerTitle: '我的帖子',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
      <Stack.Screen
        name="我的评论"
        component={Mycommit}
        options={{
          headerTitle: '我的评论',
          headerStyle: {
            backgroundColor: '#EB7A76', // 例如，设置头部的背景颜色
          },
          headerTintColor: '#fff', // 设置头部标题和按钮的颜色
          headerTitleStyle: {
            fontWeight: 'bold', // 设置头部标题的字体样式
          },
        }}
      />
    </Stack.Navigator>

  );
}


export default function TabNavApp() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerStyle: {
          backgroundColor: '#EB7A76',
        },
        headerTitleStyle: {
          color: '#fff',
        },
        headerTitleAlign: 'center',
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === '校友圈') {
            iconName = focused
              ? 'home'
              : 'home-outline';
          } else if (route.name === '消息') {
            iconName = focused ? 'chatbubble-ellipses-sharp' : 'chatbubble-ellipses-outline';
          } else if (route.name === '发帖') {
            iconName = focused ? 'add-circle-sharp' : 'add-circle-outline';
          } else if (route.name === '攒局') {
            iconName = focused ? 'grid' : 'grid-outline';
          } else if (route.name === '我的') {
            iconName = focused ? 'person' : 'person-outline';
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#EB7A76',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="校友圈" component={Schoolindex} options={{ headerShown: false }} />
      <Tab.Screen name="消息" component={MessageScreen} options={{ headerShown: false }} />
      <Tab.Screen name="发帖" component={PostScreenindex} options={{ headerShown: false }} />
      <Tab.Screen name="攒局" component={Activity} options={{ headerShown: false }} />
      <Tab.Screen name="我的" component={TheMy} options={{ headerShown: false }} />
    </Tab.Navigator>
  );
}